<template>
  <div class="content">
    <nav>
      <h2>{{ flag ? " 已经完成" : "正在进行" }}</h2>
      <p>{{ flag ? $store.getters.trueLength : $store.getters.falseLength }}</p>
    </nav>
    <ul>
      <li
        v-for="(v, i) in $store.state.objList"
        :key="i"
        v-show="v.check == flag"
      >
        <button @click="myContent(v)">跳转</button>
        <input @change="change" v-model="v.check" type="checkbox" />
        <span @click="isShow = i" v-if="isShow != i">{{ v.name }}</span>
        <input @blur="edit" v-model="v.name" v-else type="text" />
        <b @click="$store.commit('remove', i)">X</b>
      </li>
    </ul>

    <button>我是兄弟2</button>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ref } from "vue";
import { useRouter } from "vue-router";
import mitt from "../mitt";
import { onUnmounted } from "vue";

export default {
  props: {
    flag: Boolean,
  },

  setup(p) {
    let store = useStore();
    let isShow = ref(-1);
    let router = useRouter();
    function change() {
      console.log(1);
      store.commit("change");
    }
    function edit() {
      isShow.value = -1;
      store.commit("change");
    }
    function myContent(i) {
      // 跳转路由传递对象参数
      router.push(`/myContent?searchInfo=${JSON.stringify(i)}`);
      // router.push({ path: "/myContent", query: { obj: i } });
    }
    const goAdd = (e) => {
      console.log("我是兄弟1传过来的数据", e);
    };
    mitt.on("goAdd", goAdd); // 
    onUnmounted(() => { // 销毁的时候给他解绑
      mitt.off("goAdd", goAdd);
    });

    return {
      change,
      isShow,
      edit,
      myContent,
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 50%;
  margin: auto;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  p {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    line-height: 30px;
    text-align: center;
    background-color: rgb(226, 131, 23);
  }
}
ul {
  li {
    width: 100%;
    list-style: none;
    height: 40px;
    line-height: 40px;
    background-color: rgb(143, 138, 138);
    margin: 2px 0;
    border-radius: 8px;
    position: relative;
    b {
      position: absolute;
      right: 20px;
    }
  }
}
</style>
